<%@page import="timkiem.NguoiDungDAO"%>
<%@page import="java.util.Vector"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Banner 1</title>
	<link type="text/css" href="css/trontastic/jquery-ui-1.9.2.custom.css" rel="stylesheet">
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
	<script type="text/javascript" src="js/jquery-ui-1.9.2.custom.js"></script>

<style type="text/css">
@font-face
{
font-family: myFirstFont;
src: url(Font/FORTE.TTF);
}
#divbanner {
	width: 80%;
	height: 200px;
	margin: auto;
}
#tablebanner1 {
}
#tableDangKy, #tableDangNhap{
	width:100%;
	font-size:12px;
	font-family:myFirstFont;
}
.but{
	font-size: 12px;
	width: 100px;
	height: 25px;
}
.ui-widget {
 font-size: 12px;
 }
.tf{
	width:100%;
	background:url(image/Thuy%20Mac.jpg);
	-webkit-box-shadow:3px 3px 5px #FFF;	
}
a{
	text-decoration:none;
	color:#000;
}
</style>
	<%
		NguoiDungDAO nd = new NguoiDungDAO();
		Vector<String> st = nd.kiemTraDangNhap();
	%>
	<script type="text/javascript">
		$(function(){
			$(".but").button();
			$("#buttimkiem").button({
				icons:{
					primary:"ui-icon-search"
				},
			text: false
			});
			var tempArr = [<%for(String s : st){%><%='"'+s+'"'+", "%><%}%>];
			$( "#autocomplete" ).autocomplete({
	            source: tempArr
	        });
			$(function() {
		        $( "#dialog" ).dialog({
		            autoOpen: false,
		            show: "blind",
		            hide: "explode",
		            modal: true
		        });
		 
		        $( "#butdangki" ).click(function() {
		            $( "#dialog" ).dialog( "open" );
		            return false;
		        });
		    });
			$( "#datepicker" ).datepicker({
				changeMonth: true,
	            changeYear: true
	        });
			$( "#dialog2" ).dialog({
	            autoOpen: false,
	            show: "blind",
	            hide: "explode",
				modal:true
	        });
	 		$("#butdangnhap").button({
	           text:true
			});
	        $( "#butdangnhap" ).click(function() {
	            $( "#dialog2" ).dialog("open");
	            return false;
	        });
		});
	</script>
</head>
<body>
	<!-- Tạo dialog đăng nhập -->
	<div id="dialog2" title="Đăng Nhập">
    	<table id="tableDangNhap">
        	<tr>
                <td colspan="2">
                <div align="center">Nếu bạn chưa có tài khoản đăng kí <br><a href="#" class="classA">tại đây</a></div>
                <hr width="80%"/>
                </td>
            </tr>
            <tr>
            	<td>
                Tài khoản:
                </td>
                <td>
                	<input type="email" required class="tf">
                </td>
            </tr>
            <tr>
            	<td>
                Mật Khẩu:
                </td>
                <td>
                 	<input type="password" required class="tf">
                </td>
            </tr>
            <tr>
                <td colspan="2">
                	<input type="checkbox" id="checkDangNhap">
                	<label for="checkDangNhap">Ghi nhớ tài khoản</label>
                </td>
            </tr>
            <tr>
            	<td>
                </td>
                <td align="right">
                <input type="submit" value="Đăng Nhập" id="subDangNhap" align="right">
                </td>
            </tr>
        </table>
    </div>
    <!-- Kêt -->
    <!-- Tạo dialog đăng kí -->
	<div id="dialog" title="Đăng kí">
		<table id="tableDangKy">
            	<tr>
                	<td colspan="2">
                    	<div align="center">Nếu bạn đã có tài khoản vui lòng <br><a href="#" class="classA">Đăng Nhập</a></div>
                        <hr width="80%"/>

                    </td>
                </tr>
                <tr>
                	<td align="right">
                    Email:
                    </td>
                    <td>
                    	<input type="text" class="tf">
                    </td>
                </tr>
                <tr>
                	<td align="right" style="width:35%">
                    	Nhập họ & tên:
                    </td>
                    <td>
                    	<input type="text" class="tf">
                    </td>
                </tr>
                <tr>
                	<td align="right">
                    	Mật khẩu:
                    </td>
                    <td>
                    	<input type="password" class="tf">
                    </td>
                </tr>
                <tr>
                	<td align="right">
                    	Nhập lại mật khẩu:
                    </td>
                    <td>
                    	<input type="password" class="tf">
                    </td>
                </tr>
                <tr>
                	<td align="right">
                    	Giới tính:
                    </td>
                    <td>
                    	<input type="radio" name="gioiTinh" id="nam" checked>
                       	<label for="nam">Nam</label>
                        <input type="radio" name="gioiTinh" id="nu">
                        <label for="nu">Nử</label>
                        <input type="radio" name="gioiTinh" id="khac">
                        <label for="khac">Khác</label>
                    </td>
                </tr>
                <tr>
                	<td align="right">
                    	Ngày sinh:
                    </td>
                    <td>
                    	<input type="text" id="datepicker" class="tf">
                    </td>
                </tr>
                <tr>
                	<td align="right">
                    	Số điện thoại:
                    </td>
                    <td>
                    	<input type="text" class="tf">
                    </td>
                </tr>
                <tr>
                	<td align="right">
                    	Địa chỉ:
                    </td>
                    <td>
                    	<textarea rows="3" cols="17" placeholder="Vui lòng nhập địa chỉ..." class="tf"></textarea>
                    	
                    </td>
                </tr>
                <tr>
                	<td align="right">
                    	Mã xác nhận:
                    </td>
                    <td>
                    </td>
                </tr>
                <tr>
                	<td align="right">
                    	Nhập mã xác nhận:
                    </td>
                    <td>
                    	<input type="text" class="tf">
                    </td>
                </tr>
                <tr>
          			<td colspan="2">
                    	<input type="checkbox" id="checkThoaThan"> <label> Tôi đồng ý với <a href="#" class="classA">Thỏa Thuận</a></label>
                    </td>
                </tr>
                <tr>
                	<td colspan="2" align="right">
                    <input type="submit" id="subDangKy" value="Đăng Ký">
                    </td>
                    
         		</tr>
         	</table>
	</div>
	<!-- Kết thúc đăng kí -->
	<!-- Dòng banner trên cùng -->
	<div id="divbanner">
		<div style="width: 100%">
			<table border="0" id="tablebanner1">
				<tr>
					<td width="52%"><b>Đồ án Lập trình web</b></td>
					<td>
						<button class="but" id="butdangnhap">Đăng nhập</button>
					</td>
					<td>
						<button class="but" id="butdangki">Đăng kí</button>
					</td>
					<td>
						<label for="autocomplete">Tìm kiếm: </label>
    					<input type="text" id="autocomplete" />
    					<button id="buttimkiem" class="but">Search</button>
					</td>
				</tr>
			</table>
		</div>
		<div>
			<img alt="" src="image/header-bg.png">
		</div>

		<div></div>
	</div>
</body>
</html>